<template>
	<view class="device-manage">
		<u-navbar title="设备管理" :is-back="true">
			<view slot="right" @click="editEvent">{{ editText }}</view>
		</u-navbar>
		<view style="display: flex;flex-direction: column;">
			<view class="device-manage-header">
				<view class="header-search">
					<u-search shape="square" placeholder="请输入设备名称或MAC地址" input-align="left" height="70"
						bg-color="#ffffff" :show-action="false" v-model="searchKey" @custom="onSearch" @clear="searchClear"
						@search="onSearch">
					</u-search>
				</view>
				<view class="header-operation" v-if="edit">
					<u-checkbox @change="selectAllChange" v-model="selectAll">{{ checkLabel }}</u-checkbox>
					<view>共<text>{{ checkCount }}</text>条数据</view>
				</view>
			</view>
			<view class="device-manage-content"  :class="edit ? 'operation-margin-gap' : 'operation-margin'">
				<view style="height: 100%;">
					<!-- <scroll-view scroll-y="true" style="height: 900rpx;width: 100%;"> -->
						<!-- <u-gap height="200" bg-color="#f5f5f5"></u-gap> -->
						<view v-if="!isSearch" class="header-state" style="height: 200rpx;">
							<u-row gutter="16">
								<u-col span="4">
									<view class="header-state-item">
										<text>设备总数</text>
										<text style="margin-top: 20rpx;">{{ deviceCount }}人</text>
									</view>
								</u-col>
								<u-col span="4">
									<view class="header-state-item">
										<text>维修中</text>
										<text style="margin-top: 20rpx;">{{ repairingCount }}人</text>
									</view>
								</u-col>
								<u-col span="4">
									<view class="header-state-item">
										<text>已维修</text>
										<text style="margin-top: 20rpx;">{{ repairedCount }}人</text>
									</view>
								</u-col>
							</u-row>
						</view>
						<view v-for="(item,index) in deviceList" :key="index">
							<device-item :device="item" :showEdit="edit" @deviceCheck="deviceCheckChange" :checkList="checkedList" @deviceClick="deviceClick"></device-item>
						</view>
					<!-- </scroll-view> -->
				</view>
			</view>
		</view>
		<u-button type="primary" class="device-bottom-operation" @click="operationClick">{{ operationText }}</u-button>
	</view>
</template>

<script>
	import deviceItem from './components/device-item.vue'
	export default {
		components: {
			deviceItem
		},
		data() {
			return {
				edit: false,
				searchKey: '',
				isSearch:false,
				selectAll: false,
				checkLabel: '全选',
				deviceCount: 0,
				repairedCount: 0,
				repairingCount: 0,
				checkedList:[],
				deviceList: [{
						name: '设备A',
						mac: 'AS-23-DD-22',
						plateNo: 'A87775',
						number: 12231,
						edit: false
					},
					{
						name: '设备A',
						mac: 'AS-23-DD-22',
						plateNo: 'A87775',
						number:12232,
						edit: true
					},
					{
						name: '设备A',
						mac: 'AS-23-DD-22',
						plateNo: 'A87775',
						number: 12233,
						edit: false
					},
					{
						name: '设备A',
						mac: 'AS-23-DD-22',
						plateNo: 'A87775',
						number: 12234,
						edit: false
					},
					{
						name: '设备A',
						mac: 'AS-23-DD-22',
						plateNo: 'A87775',
						number: 12235,
						edit: false
					},
				],
				serverResult:[{
						name: '设备A',
						mac: 'AS-23-DD-22',
						plateNo: 'A87775',
						number: 12231,
						edit: false
					},
					{
						name: '设备A',
						mac: 'AS-23-DD-22',
						plateNo: 'A87775',
						number:12232,
						edit: true
					},
					{
						name: '设备A',
						mac: 'AS-23-DD-22',
						plateNo: 'A87775',
						number: 12233,
						edit: false
					},
					{
						name: '设备A',
						mac: 'AS-23-DD-22',
						plateNo: 'A87775',
						number: 12234,
						edit: false
					},
					{
						name: '设备A',
						mac: 'AS-23-DD-22',
						plateNo: 'A87775',
						number: 12235,
						edit: false
					},],
				searchResult:[
					{
							name: '设备A',
							mac: 'AS-23-DD-22',
							plateNo: 'A87775',
							number: 12231,
							edit: false
						},
						{
							name: '设备A',
							mac: 'AS-23-DD-22',
							plateNo: 'A87775',
							number:12232,
							edit: true
						},
				]
			}
		},
		methods: {
			editEvent(){
				this.edit = !this.edit
			},
			//设备item checkbox状态更改
			deviceCheckChange(value,number){
				if(value){
					this.checkedList.push(number)
				}else{
					this.checkedList.splice(this.checkedList.findIndex(item=>item===number),1)
				}
				console.log('checkedList:',this.checkedList)
			},
			deviceClick(val){
				console.log('deviceClick')
				this.$u.route('/pages/deviceDetail/index',{ action:0 })
			},
			//搜索
			onSearch(key) {
				this.isSearch = true
				this.deviceList.splice(0,this.deviceList.length)
				this.deviceList = [...this.searchResult]
			},
			//搜索清空
			searchClear(){
				this.isSearch = false
				this.deviceList.splice(0,this.deviceList.length)
				this.deviceList = [...this.serverResult]
			},
			selectAllChange(check) {
				console.log('selectAllChange : ',check, this.checkedList)
				this.deviceList.map((item)=>{
					if(check.value){
						this.checkedList.push(item.number)
					}else{
						this.checkedList.splice(0, this.checkedList.length);
					}
				})
				
			},
			operationClick(){
				if(this.edit){
					//删除设备
				}else{
					this.scan()
				}
			},
			//调用二维码
			scan() {
			  uni.scanCode({
				success: (res) => {
				  console.log("条码类型：" + res.scanType);
				  console.log("条码内容：" + res.result);
				 //  uni.navigateTo({
					// url: "/pages/scan/index?content=" + res.result,
				 //  });
				},
			  });
			},
		},
		computed:{
			editText(){
				if(this.edit){
					return '删除'
				}else{
					return '编辑' 
				}
			},
			checkCount(){
				return this.checkedList.length
			},
			operationText(){
				if(this.edit){
					return '删除设备'
				}else{
					return '添加设备'
				}
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.device-manage {
		height: calc(100vh);
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
		.device-manage-header {
			position: fixed;
			z-index: 100;
			width: 100%;
			display: flex;
			flex-direction: column;
			background: #f5f5f5;
			.header-search {
				padding: 30rpx 30rpx 30rpx;
			}

			.header-operation {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx 30rpx;
			}

		}

		.device-manage-content {
			flex: 1;
			background: #ffffff;
			.header-state {
				padding: 0 30rpx 30rpx;

				.header-state-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background: #f5f5f5;
					height: 200rpx;
				}
			}
		}

		.device-bottom-operation{
			position: fixed;
			bottom: 10rpx;
			width: 100%;
		}
	}
	.operation-margin-gap{
		margin-top: 180rpx;
	}
	.operation-margin{
		margin-top: 100rpx;
	}
</style>
